<template>
    <div class="city">
        <my-header :city="cityName"></my-header>
        <!-- 轮播图 -->
        <div class="carousel">
            <el-carousel>
                <el-carousel-item v-for="(item) in carouselImg" :key="item.index">
                <img :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 从这里开始写 -->
        <!-- 这里写该城市的旅游资讯 -->
		<div class="tourism">
			<div class="lvyou">
				<p>东澳岛</p>
				<div class="jingdian">东澳岛位于珠海万山群岛中部，植被丰富，沙滩众多，充满了自然古朴的热带海岛风情。
				你还可以爬上斧担山蜜月阁登高望远，游览建于清朝乾隆年间的古堡铳城，或是在岛上品尝新鲜地道的海鲜。
				岛上还有历史遗迹可看，在东澳岛的东部，可以发现建于清朝乾隆年间、为抵御外族入侵而修建的古堡铳城——东澳岛铳城，
				以及于层层山林中隐匿着“万海平波”字样的石刻。</div>
			</div>
			<div class="lvyou">
				<p>唐家湾古镇</p>
				<div class="jingdian">唐家湾古镇是一个有艺术气息的古镇，英才俊彦辈出，清华大学首任校长唐国安、知名粤曲家唐涤生，
				中国版画家古元等都出生在这块宝地。唐家湾绵长深幽的古巷中，你能嗅到混合着现代与淳朴的气息。虽然已经时过境迁，
				但是在唐家湾的十六条自然村中，各保留了一片清末明初的建筑群落，青砖灰瓦的百年老屋，隐约可见气势恢宏的屋脊图腾、
				工艺精湛的飞鱼挑檐。</div>
			</div>
			<div class="lvyou">
				<p>圆明新园</p>
				<div class="jingdian">圆明新园以北京圆明园焚烧前的建筑为原稿，选择圆明园40景中的18个景点，1:1的比例建造。
				虽然都是仿制的景象，但仍可感受其皇家园林的恢弘气势。另外还设有《梦回圆明园》等剧场演出，结合爆炸、跑马等元素，
				值得一看。圆明新园共分为皇家建筑群、江南园林建筑群、西洋建筑群三大景区。</div>
			</div>
			
		</div>



        <!-- 这个是地方美食的轮播图   -->
        <div class="carouselMeishi">
            <el-carousel :interval="4000" type="card">
                <el-carousel-item v-for="(item) in carouselMeishi" :key="item.index">
                <img :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 这里写该城市的美食推荐 -->
		<div class="food">
			<div class="meishi">
				<p>斗门重壳蟹</p>
				<div class="msjieshao">
					又称松壳蟹，生长于咸淡水海域，是一种极少有的海鲜。属滋补佳肴，在港、澳、台和珠海等地区闻名遐迩。
					比较著名的一道海鲜菜——花雕双蟹，又名花雕鹅肝重壳蟹，就是采用珠海四大美食之一的斗门重壳蟹为主原材料做成的。
				</div>
			</div>
			<div class="meishi">
				<p>横琴蚝</p>
				<div class="msjieshao">
					珠海横琴蚝因其生活地横琴岛而得名。横琴岛位于咸淡水的交界处，阳光适当，温度适宜，水质干净，生长在这里的横琴蚝
					肥硕鲜美，味道清甜，素有“海洋牛奶”之称，以大、肥、白、嫩、脆而傲视同类，来到珠海一定不要错过横琴蚝的美味！
				</div>
			</div>
			<div class="meishi">
				<p>烧禾虫</p>
				<div class="msjieshao">
					烧禾虫是广东省传统的汉族名菜，属于粤菜系是许多广东人喜爱的珍馐。白蕉禾虫，又名地蚕，多生长于咸淡水交汇区域的
					滩涂淤泥中，为珠海著名特产，是一种高蛋白食品，有滋补脾胃，滋阴补肾，补血养血和防治水肿，脚气及风湿病等功效。
				</div>
			</div>
		</div>
        <!-- 写到这里  下面是底部 和底部保持间隙-->
        <my-footer></my-footer>
           
    </div>
</template>

<script>
export default {
    name: 'Guangzhou',
    data() {
        return {
            carouselImg:[
                // 跟下面路径形式来加景点观光轮播图，加多少都可以
                { url: require("@/assets/zhuhai/zhuhai03.jpeg")},
                { url: require("@/assets/zhuhai/zhuhai01.jpg")},
				{ url: require("@/assets/zhuhai/zhuhai02.jpg")},

            ],
            carouselMeishi:[
                // 跟下面路径形式来加地方美食轮播图，加多少都可以
                { url: require("@/assets/zhuhai/zhuhai04.jpg")},
                { url: require("@/assets/zhuhai/zhuhai05.jpg")},
                { url: require("@/assets/zhuhai/zhuhai06.jpg")},
            ],
            cityName:'珠海'
        }
    }

};
</script>

<style scoped>
.carousel {
    width: 800px;
    height: 360px;
    margin: 50px auto;
	margin-bottom: 10px;
}
.carousel img{
	max-width: 100%;
}
.carouselMeishi {
    margin: 0 auto;
    width: 1000px;
}
.carouselMeishi img {
    max-width: 100%;
    min-width: 100%;
}
.tourism {
    width: 1000px;
    /* background-color: #548615; */
    height: 350px;
    margin: 0 auto;
    font-family: NSimSun;

}
.food {
    width: 1000px;
    /* background-color: #55aaff; */
    height: 300px;
    margin: 50px auto;
    font-family: NSimSun;

}
.lvyou{
	width: 330px;
	height: 300px;
	/* font-size: 16px; */
	float: left;
	border-left: #999999 dashed 1px;
	border-right: #999999 dashed 1px;
}
.lvyou p{
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	display: block;
}
.jingdian{
	text-indent: 28px;
	margin-left: 26px;
	margin-right: 26px;
	font-size: 16px;
	font-weight: bold;
}
.meishi{
	margin-top: 20px;
	width:310px;
	height: 250px;
	float: left;
	background-color: #b8d8ff;
	opacity: 0.8;
	border-radius: 25px;
	margin-left: 15px;
}
.meishi p{
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	display: block;
	color: #000000;
}
.msjieshao{
	color: #000000;
	font-weight: bold;
	/* text-indent: 40px; */
}
</style>